<template>
    <van-button
        :icon="value===1 ? 'good-job':'good-job-o'"
        :color="value===1 ?'#3296fa':'#777'"
        @click="onLike"
        plain
        :loading="zanLoading"
    ></van-button>
</template>
<script>
import {deleteLike,addLike} from '@/api/user'
export default {
    name:'articleLike',
    props:{
        // 接受是否被点赞
        value:{
            type:Number,
            required:true
        },
        // 文章ID，外部传入
        articleId:{
            type:[String,Number,Object],
            required:true
        }
    },
    data(){
        return{
            zanLoading:false,
        }
    },
    created(){
        console.log(this);
    },
    methods:{
        async onLike(){
            this.zanLoading = true // 显示加载中
            try {
                // 是否被点赞了
                let articleLike = 1
                if(this.value===1){
                    // 点赞了，要做取消点赞
                    await deleteLike(this.articleId)
                    // 取消成功了
                    articleLike = -1
                }else{
                    // 没点赞，要点赞
                    await addLike(this.articleId)
                }
                 // 提示框
                this.$toast.success(this.value === 1 ? '取消成功':'点赞成功')
                // 通知更新
                this.$emit('input',articleLike)
            } catch (error) {
                console.log(error);
                //401是没有登录，或者登录失效
                if (error.response && error.response.status === 401) {
                    this.$toast("请登录");
                    this.$router.push("/login"); //跳转去登录
                }else{
                    this.$toast.fail('操作失败')
                }
            }
            this.zanLoading = false  // 关闭加载中
        }
    }
}